﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Rose.Models.UserInfoModel>" %>



<asp:Content ID="Content2" ContentPlaceHolderID="MiddleContent" runat="server">

   <div id="headmessage">
   <p> <%=ViewData["Message"] %></p>
    <p><%=ViewData["Error"] %></p>
   </div>
   
   <form method="post" action="/Account/ManageUserInfo" onsubmit="ClearHide();">
        <img id="headimage" width="100px" height="100px" src="<%=Model.ImagePath %>" />
        <div id="accountform">
            
              <p><dt class="laber">账号:</dt><dt class="info"><%=Html.TextBox("nouse", Model.UserName, new { @disabled = "true" })%></dt></p>
              <%=Html.HiddenFor(c => c.UserName)%>
              <p><dt class="laber">真实姓名:</dt><dt class="info"><%= Html.TextBoxFor(model => model.TrueName)%></dt></p>
              <p> <dt class="laber">头像:</dt><dt class="info"><input type="file" accept="image/*" id="File1" name="Filedata" value="nofile" /><input type="button" value="上传" id="Button"  onclick="Upload();" /></dt></p>
              
              

              <div style="display:none"><p><dt class="laber">头像:</dt><dt class="info"><%= Html.TextBoxFor(model => model.ImagePath, new { @id = "ImagePath" })%></dt></p></div>

              <p><dt class="laber">性别:</dt><dt class="info"><%=Html.DropDownList("Gender")%></dt></p>
              
              
              <p><dt class="laber">生日:</dt><dt class="info"><span><%=Model.BirthYear%>-<%=Model.BirthMonth%>-<%=Model.BirthDate%></span>&nbsp;<a href="javascript:void(0);">编辑</a>
<select style="display:none" id="year" name="BirthYear"> </select><select style="display:none" name="BirthMonth" id="month"></select><select style="display:none" name="BirthDate" id="day"></select></dt></p>
               
               
              <p><dt class="laber">家庭住址:</dt><dt class="info"><span><%=Model.AddressProvince%> <%=Model.AddressCity%> <%=Model.AddressTown%> <%=Model.AddressStreet%></span>&nbsp;
              <a href="javascript:void(0);">编辑</a>
              <select id="province" style="display:none" name="AddressProvince"></select><select name="AddressCity" id="city" style="display:none"></select><select id="town" name="AddressTown" style="display:none"></select><select id="street" name="AddressStreet" style="display:none"></select></dt></p>
               
               <p><dt class="laber">邮箱:</dt><dt class="info"><%=Html.TextBoxFor(model => model.Email)%></dt></p>

              
               <p><dt class="laber">大学:</dt><dt class="info"><%= Html.TextBoxFor(model => model.University)%>
               <p><dt class="laber">院系:</dt><dt class="info">
               <span><%=Model.College%> </span>
               <select  style="display:none" id="College" name="College"></select>
               <input name="OtherCollege" type="text" style="display:none" />
               &nbsp;
               </dt>
               </p>
               
               
              
               <p><dt class="laber">专业班级:</dt><dt class="info"><%=Html.TextBoxFor(model=>model.Major) %></dt></p>
               
                 <p><dt class="laber">入学时间:</dt><dt class="info"><%=Html.DropDownList("SchoolYear")%></dt></p>



                <p><dt class="laber">QQ:</dt><dt class="info"> <%= Html.TextBoxFor(model => model.QQ)%></dt></p>
                <p><dt class="laber">个人网站:</dt>  <dt class="info"><%= Html.TextBoxFor(model => model.WebSite)%></dt></p>
                <p><dt class="laber">联系电话(不公开):</dt><dt class="info"> <%= Html.TextBoxFor(model => model.Phone)%></dt></p>
                <p> <dt class="laber">学号(不公开):</dt><dt class="info"><%= Html.TextBoxFor(model => model.SchoolId)%></dt></p>
               <p> <dt class="laber">&nbsp;</dt><dt class="info"><input type="submit" value="保存" /></dt></p> 
                

             </div>
             
               
            

    </form>
   
    



</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<link href="../../Content/Css/registerform.css" rel="Stylesheet" />
<script type="text/javascript" src="../../Content/Js/allunivlist.js"></script>

<%--<script type="text/javascript" src="../../Content/ImportJs/jquery-ui-1.8.9.custom.js"></script>
<link href="../../Content/Css/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css" />--%>

<link href="../../Content/ui/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<script src="../../Content/ui/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>

<style type="text/css">
    .university{font-size:small;width:240px;display:inline-block;}
    .city{padding:1px 1px 1px 5px;display:inline-block;}
</style>

<script type="text/javascript">
   function ClearHide()
   {
      $('select').each(function(){
		if($(this).css('display')=='none')$(this).remove();
	});

    
   }


    $('document').ready(function () {
        var d = new Date;
        var year = $('#year');
        var month = $('#month');
        var day = $('#day');
        $('#year').val(<%=Model.BirthYear %>);
        $('#month').val(<%=Model.BirthMonth %>);
        $('#day').val(<%=Model.BirthDate %>);
        for (i = 1980; i <= d.getFullYear(); i++)
            year.append('<option value="' + i + '">' + i + '</option>');
        for (i = 1; i < 13; i++)
            month.append('<option value="' + i + '">' + i + '</option>');
        for (i = 1; i < 32; i++)
            day.append('<option value="' + i + '">' + i + '</option>');
        $('#month').change(function () {

            sday = $('#day');
            var day = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
            var year = $('#year').val();
            if (year % 400 == 0 || year % 4 == 0 && year % 100 != 0) {
                day[1] = 29
            }
            else {
                day[1] = 28
            }
            sday.empty();
            for (i = 1; i <= day[$('#month').val() - 1]; i++) {
                sday.append('<option value="' + i + '">' + i + '</option>');
            }
        });
        $('#year').change(function () {
            var month = $('#month').val();
            if (month != '2') return;
            var year = $('#year').val();
            var option = $('#day option').length;
            if (year % 400 == 0 || year % 4 == 0 && year % 100 != 0) {
                if (option == 28)
                    $('#day').append('<option value="29">29</option>');
            } else if (option == 29)
                $('#day option:last').remove();
        });

        ///s生日结束


        $('document').ready(function () {
         
             $('#province').change(function () {
            $.getJSON('/json/city?provinceId=' + $('#province').val(), function (city) {
                $('#town').hide();
                $('#street').hide();
                $('#city').show();
                $('#city').empty();
                for (c in city) {
                    $('#city').append('<option value="' + city[c].Value + '">' + city[c].Text + '</option>');
                }
            });
        });
        $('#city').change(function () {
            $.getJSON('/json/town?cityId=' + $('#city').val(), function (town) {
               
                $('#street').hide();
                $('#town').show();
                $('#town').empty();
                for (s in town) {
                    $('#town').append('<option value="' + town[s].Value + '">' + town[s].Text + '</option>');
                }
            });
        });
        $('#town').change(function () {
            $.getJSON('/json/street?townId=' + $('#town').val(), function (street) {
                if (street.length <= 0) return;
                $('#street').show();
                $('#street').empty();
                for (p in street) {
                    $('#street').append('<option value="' + street[p].Value + '">' + street[p].Text + '</option>');
                }
            });
        });

        $.getJSON("/json/province", function (province) {
            //document.write(JSON.stringify(province));
            for (p in province) {
                $('#province').append('<option value="' + province[p].Value + '">' + province[p].Text + '</option>');
            }
            
               $.getJSON('/json/city?provinceId=' + $('#province option:first').val(), function (city) {
                for (c in city) {
                    $('#city').append('<option value="' + city[c].Value + '">' + city[c].Text + '</option>');
                }
				$.getJSON('/json/town?cityId=' + $('#city option:first').val(), function (town) {
					for (s in town) {
						$('#town').append('<option value="' + town[s].Value + '">' + town[s].Text + '</option>');
					}
					$.getJSON('/json/street?townId=' + $('#town option:first').val(), function (street) {
						if (street.length <= 0) return;
						for (p in street) {
							$('#street').append('<option value="' + street[p].Value + '">' + street[p].Text + '</option>');
						}
					});
				});
            });

        });


//        $('#province').change();
//        $('#city').change();
//        $('#town').change();
       
        ///end of 地址

//        $('#province').change();
        

    });//END OF document
        
        


        $('document').ready(function(){
            ///
            //global param
            global_schoolid=0;
           global_collegeid=0;
         dialogname = 'dialog';
        $('body').append('<div id="' + dialogname + '" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 60.4px; height: auto;" scrolltop="0" scrollleft="0"></div>');
        $('#' + dialogname).dialog({ autoOpen: false, width: 800, height: 560, resizable: false, modal: true });
        $('#' + dialogname).dialog('option', 'title', '选择学校');
        $('#' + dialogname).append('搜索:<input type="text" id="search" class="ui-widget"/><br />');
        $('#search').keyup(function () {
            search = $('#search').val();
            $('#school').empty();
            if (search) {
                find = 0;
                for (key in allUnivList[0]['provs']) {
                    for (school in allUnivList[0]['provs'][key]['univs']) {
                        if (find < 75 && allUnivList[0]['provs'][key]['univs'][school]['name'].indexOf(search) >= 0) {
                            newschool(allUnivList[0]['provs'][key]['univs'][school]);
                            find++;
                        }
                    }
                }
            }
        });
        $('#University').focus(function () {
           
            $('#' + dialogname).dialog('open');
        });

        $('#College').change(function(){
            global_collegeid=$('#College').val();
//            Major(global_schoolid,global_collegeid);
        });
       

        $('#' + dialogname).append('<ul style="list-style:none;margin:0;border:1px solid #C3C3C3;padding:1px 1px 1px 1px;" id="citys"></ul>');
        $.each(allUnivList[0]['provs'], function (key, value) {
            $('#citys').append('<li class="city" id="p' + key + '">' + value['name'] + '</li>');
            color = $('#p' + key).css('color');
            $('#p' + key).mouseover(function () {
                $('#p' + key).css('color', 'red');
            });
            $('#p' + key).mouseout(function () {
                $('#p' + key).css('color', color);
            });
            $('#p' + key).mousedown(function () {
                $('#school').empty();
                $.each(allUnivList[0]['provs'][key]['univs'], function (key, value) {
                    newschool(value);
                });
            });
        });
        $('#' + dialogname).append('<ul id="school" style="overflow-x: hidden;height:400px;margin:10px 0 0 0;border:1px solid #C3C3C3;padding:1px 1px 1px 1px;"></ul>');
    });
    function newschool(value) {
        $('#school').append('<li class="university" id="u' + value["id"] + '">' + value['name'] + '</li>');
        $('#u' + value["id"]).mousedown(function () {

            $('#University').val(value['name']);
            $('#' + dialogname).dialog('close');
            $('#College').parent('dt.info').find('span').hide();
            global_schoolid=value['id'];
            
            College(value['id']);
            event.preventDefault();
        });
        color = $('#u' + value["id"]).css('color');
        $('#u' + value["id"]).mouseover(function () {
            $('#u' + value["id"]).css('color', 'red');
        });
        $('#u' + value["id"]).mouseout(function () {
            $('#u' + value["id"]).css('color', color);
        });
    }

   function College(schoolId)
   {
         var collengeid='#College';//这个为对应学院下拉列表的ID
	//这个ID改成你的大学框的ID
    
	//这个ID改成你的university对应传过来得ID
        $.getJSON('/json/college?schoolId='+schoolId, function (collenge) {
            $(collengeid).show();
            $(collengeid).empty();
            for (p in collenge) {
                $(collengeid).append('<option value="' + collenge[p].Value + '">' + collenge[p].Text + '</option>');
            }//END FOR
            if($(collengeid+' option').length==1&&$(collengeid+' option').val()==-1)$(collengeid).parent('dt.info').find('input').show();
            else $(collengeid).parent('dt.info').find('input').hide();


        });
     }

     function Major(schoolId,collegeId)
     {
        var majorid="#Major";
      
        $.getJSON('/json/major?schoolId='+schoolId+'&collegeId='+collegeId,function(majors){
            $(majorid).show();
            $(majorid).empty();
            for(p in majors){
                $(majorid).append('<option value="'+majors[p].Value+'">'+majors[p].Text+'</option>');
            }
        });
     }
   

        });//end of university document

    $(document).ready(function(){
		$('dt.info a').click(function(event){
			$(this).parent('dt.info').find('span').hide();
			$(this).hide();
//				if($(this).parent('dt.info').find('select').length>3)
//				$(this).parent('dt.info').find('select:first').show();
//			else
				$(this).parent('dt.info').find('select').each(function(){
				if($(this).find('option').length>0)$(this).show();
			});


		});

		$('#College,#Major').change(function(){
			if($(this).val()==-1)
				$(this).parent('dt.info').find('input').show();
			else
				$(this).parent('dt.info').find('input').hide();
		});
	});


    //专业
    


</script>




		<script src="../../Content/jcrop/jcrop/js/jquery.Jcrop.js" type="text/javascript"></script>
        <script src="../../Content/Js/ajaxfileupload.js" type="text/javascript"></script>
		<link rel="stylesheet" href="../../Content/jcrop/jcrop/css/jquery.Jcrop.css" type="text/css" />
	

		<script type="text/javascript">
		    var jcrop_api, boundx, boundy;


		    function AddImagePath(data) {

		        $('#ImagePath').val(data);
                //显示一个人的头像在这里
		        $('#cutimage').dialog('close');
		       
		        $('#headimage').attr('src', data);
		       
            }

		    function AfterCut() {
		         
		            if(checkCoords())
		          {  var x = $('#x').val();
		            var y = $('#y').val();
		            var width = $('#w').val();
		            var height = $('#h').val();
		            var filename = $('#filename').val();
		           
		            $.ajax({
		                url: '/Image/CutHeadImage',
		                type: 'post',
		                data: { x: x, y: y, width: width, height: height, filename: filename },
		                success: function (data) { AddImagePath(data) },
		                error: function () { alert('头像更改错误，请重试！'); }
		            }); //end of ajax
                }
            }

		    function Upload() {

		        $('#cutimage').remove();
                //先处理多余的页面

		        $.ajaxFileUpload({
		            url: '/Image/UploadHeadImage',
		            secureuri: false,
		            fileElementId: 'File1',

		            success: function (data) {

		                var src = data.body.innerHTML.toString();
		                if (src.indexOf('.') >= 0)
		                {
                         CutImage(); 
		                $('#cropbox').attr('src', src);
		                $('#preview').attr('src', src);
		                $('#filename').val(src);
		                $('#cropbox').Jcrop({
		                    aspectRatio: 1,
		                    onSelect: updateCoords,
		                    onRelease: clearCoords
		                }, function () {
		                    var bounds = this.getBounds();
		                    boundx = bounds[0];
		                    boundy = bounds[1];
		                    jcrop_api = this;
		                }); //end of jcrop
		            }
		            }//end of success
		        });
		        event.preventDefault();
		    }


		    function CutImage() {
		        $('body').append('<div id="cutimage"><div  ><table><tr><td><img src="" id="cropbox"  /></td>	<td><div style="width:100px;height:100px;overflow:hidden;"><img src="" id="preview" alt="Preview" />	</div>	</td>	</tr>  </table> <input type="hidden" id="x" name="x" />	<input type="hidden" id="y" name="y" />	<input type="hidden" id="w" name="width" />			<input type="hidden" id="h" name="height" />          <input type="hidden" id="filename" name="filename" /><input id="cut" type="button" value="截图" onclick="AfterCut();" /></div></div>');
		        $('#cutimage').dialog({ autoOpen: true, width:900, height: 700, resizable: true, modal: true });
            }

            

		    function clearCoords() {
		        $('form input').val('');
		    }

		    function updateCoords(c) {
		        $('#x').val(c.x);
		        $('#y').val(c.y);
		        $('#w').val(c.w);
		        $('#h').val(c.h);
		        if (parseInt(c.w) > 0) {
		            var rx = 100 / c.w;
		            var ry = 100 / c.h;

		            $('#preview').css({
		                width: Math.round(rx * boundx) + 'px',
		                height: Math.round(ry * boundy) + 'px',
		                marginLeft: '-' + Math.round(rx * c.x) + 'px',
		                marginTop: '-' + Math.round(ry * c.y) + 'px'
		            });
		        }
		    }

		    function checkCoords() {
		        var width = parseInt($('#w').val());
		        if (width)
		            if (width < 10)
		                alert('选择的区域不能小于10个像素'); //这是我额外增加的判断规则
		            else
		                return true; //开始POST数据，这里可以改成AJAX请求，以地址形式处理后图片地址返回再处理HTML
		        else
		            alert('请选择要截图的区域');
		        return false;
		    }
		    //JS部分基本不用改动，只要把HTML和JS部分嵌入应该就没有问题了
		</script>
</asp:Content>

